import React from 'react';
import {inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {Button, Icon, Row, Col} from 'antd';
import { WeaMaterialLib } from '../../../../pc4backstage/portal4engine/components/common';
import {WeaLocaleProvider, WeaDialog, WeaRightMenu, WeaMoreButton, WeaFormItem, WeaSelect, WeaInput, WeaBrowser, WeaUpload,WeaColorPicker,WeaCheckbox} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import './style/';
class AddCustomApplication extends React.Component{

    constructor(props){
        super(props)
        this.state = {
            application:{
                id : -1,
                text : "",
                logo : "",
                bgc : "#000",
                url :"",
                realUrl:"",
                replaceData : [],
                urlType : "1",
                showNumberUrl: "",
                isOpacityBgc:"0"
            }
        }
    }




    componentWillReceiveProps(nextProps) {
        if(nextProps.arrayId!=-1){

            let replaceData = ""
            let url = nextProps.data.url
            if(nextProps.data.urlType == 1){
                let jsonUrl = JSON.parse(nextProps.data.url)
                const id = jsonUrl[0].id
                const name = jsonUrl[0].name
                replaceData = [{
                    id:id,
                    name:name
                }]
                url = jsonUrl
            }
            let data = {};
            for(var key in nextProps.data){
                data[key]=nextProps.data[key];
            }

            if(!data.bgc){
                data = Object.assign(data,{isOpacityBgc:"1","replaceData":replaceData,url:url})
            }else{
                data = Object.assign(data,{isOpacityBgc:"0","replaceData":replaceData,url:url})
            }
            this.setStateData(data)

        }else{
            this.setStateData({id : -1,
                text : "",
                logo : "",
                bgc : "#000",
                url :"",
                replaceData : [],
                urlType : "1",
                showNumberUrl: "",
                isOpacityBgc:"0"})
        }

    }

    setStateData = (stateData)=>{
        let application = Object.assign(this.state.application,stateData);
        this.setState({
            application
        })
    }

    render (){
        let id = this.props.arrayId
        let visible = this.props.addVisiable


            //fromData.url = "/wui/index.html#/main"+fromData.replaceData[0].mobxrouteurl
        const colProps = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };



        return  (
            <WeaDialog
                title={`${id != -1 ? getLabel(82178, '编辑应用') : getLabel(387142, '添加应用')}`}
                visible={visible}
                icon='icon-coms-portal'
                iconBgcolor='#1a57a0'
                hasScroll={true}
                style={{width: 700}}
                buttons={this.getButtons()}
                onCancel={() => {this.props.setAddVisiable(false)}}
            >
                <WeaRightMenu datas={this.getRightMenus()}>
                    <div className="e9desktop-menu-add">
                        <WeaFormItem label={getLabel(385808, '菜单地址')} {...colProps}>
                            <Row gutter={8}>
                                <Col span={8}>
                                    <WeaSelect
                                        value={this.state.application.urlType}
                                        options={[
                                            {key: '1', selected: true, showname: getLabel(33496, '系统菜单')},
                                            {key: '2', selected: false, showname: getLabel(385809, '自定义URL')}
                                        ]}
                                        onChange={value => {this.setStateData({"urlType":value})}}
                                    />
                                </Col>
                                <Col span={16}>
                                    {this.state.application.urlType == '2' ? (
                                        <WeaInput
                                            value={this.state.application.url}
                                            viewAttr={3}
                                            onChange={
                                                (value) => {
                                                    let url = value;
                                                    if (value.indexOf('www.') == 0) url = 'http://' + url;
                                                    this.setStateData({"url":url});
                                                }
                                            }
                                            helpfulTip={getLabel('386567', '外部地址，请在地址前加上http://或https://')}
                                        />
                                    ) : (
                                        <WeaBrowser
                                            title={getLabel(33496, '系统菜单')}
                                            type={'portalmenu'}
                                            tabs={[
                                                {name: getLabel(33675, '前端菜单'), key: '1', dataParams: {sourcetype: '1'}, conditionDataParams: {sourcetype: '1'}},
                                                {name: getLabel(33676, '后端菜单'), key: '2', dataParams: {sourcetype: '2'}, conditionDataParams: {sourcetype: '2'}},
                                                {name: getLabel(18773, '自定义菜单'), key: '3', dataParams: {sourcetype: '3'}, conditionDataParams: {sourcetype: '3'}},
                                                {name: getLabel(23094, '系统门户页面'), key: '4', dataParams: {sourcetype: '4'}, conditionDataParams: {sourcetype: '4'}}
                                            ]}
                                            viewAttr={3}
                                            replaceDatas={mobx.toJS(this.state.application.replaceData)}
                                            onChange={(id, name, data) => {this.setStateData({"url": data})}}
                                        />
                                    )
                                    }
                                </Col>
                            </Row>
                        </WeaFormItem>
                        <WeaFormItem label={getLabel(30828, '显示名称')} {...colProps}>
                            <WeaInput value={this.state.application.text} viewAttr={3} onChange={value => this.setStateData({"text": value})}/>
                        </WeaFormItem>
                        <WeaFormItem label={getLabel(387148, '	未读数接口地址')} {...colProps}>
                            <WeaInput
                                value={this.state.application.showNumberUrl}
                                onChange={value => this.setStateData({"showNumberUrl": value})}
                                helpfulTip={getLabel(387149, '如需在应用图标上显示未读数，请配置未读数获取接口地址，如不配置则不显示未读数')}
                            />
                        </WeaFormItem>
                        <WeaFormItem label={getLabel(2077,"背景颜色")} {...colProps}>
                            <span>透明:</span>
                            <div className="lr_addCustomApplication_bgc_div_checkbox" >
                                <WeaCheckbox
                                    value={this.state.application.isOpacityBgc}
                                    onChange={(value) => {
                                        if (value === "1") {
                                            this.setStateData({"isOpacityBgc":"1","bgc":""})

                                        } else {
                                            this.setStateData({"isOpacityBgc":"0"})
                                        }
                                    }}
                                />
                            </div>
                            {
                                this.state.application.isOpacityBgc == "0"?(  <div className="lr_addCustomApplication_bgc_div_colorPicker" >
                                    <WeaColorPicker
                                        value={this.state.application.bgc}
                                        onChange={(v)=> this.setStateData({"bgc": v})}
                                    />
                                </div>):""
                            }




                        </WeaFormItem>
                        <WeaFormItem label={getLabel(22969, '图标')} {...colProps} style={{height: '80px', lineHeight: '80px'}}>
                            {
                                this.state.application.logo ? (
                                    <div className="e9desktop-menu-add-img-edit">
                                        <WeaMaterialLib multiCheck={false} onChange={(value)=>{ this.setStateData({"logo":value})}} type='button' >
                                            <img src={this.state.application.logo} alt="" className="e9desktop-menu-add-img-edit-img" title={getLabel(387150, '更换图标')}/>
                                        </WeaMaterialLib>
                                        <div className="e9desktop-menu-add-img-edit-del" title={getLabel(82746, '删除图标')}>
                                            <Icon type="cross" onClick={() => this.setStateData({"logo": ''})}/>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="e9desktop-menu-add-img-add">
                                        <WeaMaterialLib multiCheck={false} onChange={(value)=>{ this.setStateData({"logo":value})}} type='button' >
                                            <div className="e9desktop-menu-add-img-add-icon" title={getLabel(387151, '添加图标')}>
                                                <Icon type="plus"/>
                                            </div>
                                        </WeaMaterialLib>
                                    </div>
                                )
                            }

                        </WeaFormItem>

                    </div>
                </WeaRightMenu>
            </WeaDialog>
        )
    }


    getButtons= ()=> {
        let onAddSave = this.props.saveCustomApplication

        let btns = [];
        btns.push(<Button type="primary" onClick={()=>{onAddSave(this.state.application)}}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton datas={this.getRightMenus()}/>);
        return btns;
    }
    getRightMenus=()=> {
        let onAddSave = this.props.saveCustomApplication
        let btns = [];
        btns.push({key: '1', icon: <i className="icon-coms-Preservation"/>, content: getLabel(30986, '保存'), onClick: ()=>{onAddSave(this.state.application)}});
        return btns;
    }
}
export default AddCustomApplication